AtlasCamp 2010: Needs more jQuery - Using advanced Javascript in Atlassian Plugins - Zach Davis

Needs more jQuery
Using advanced JavaScript in
Atlassian Plugins
Tuesday, November 2, 2010

Needs more jQuery
Using jQuery and AUI to create
better plugins with less work

AUI
Atlassian User Interface

“owie”
Atlassian User Interface

AUI Dropdown

AUI Dialog

AUI DialogAUI Forms

AUI Toolbar

AUI Dialog
Not in AUI

AUI Dialog
Not in AUI. Yet.

AUI is driving a lot of our UI innovation.

AUI is driving a lot of our UI innovation.
It can drive yours too.

Who am I?
• Zach Davis
• Front-end Developer
• Integration Team
• San Francisco

What
Why
How
Where
?

What the Atlassian User Interface library is
Why
How
Where
?

What
Why we chose jQuery
How
Where
?

What
Why you should choose AUI
How
Where
?

What
Why
How to use AUI
Where
?

What
Why
How
Where AUI is now
?

What
Why
How
Where AUI is headed
?

What
Why
How
Where
Questions?

What is the Atlassian User Interface library?
Why
How
Where
?

“The Atlassian User Interface
(AUI) is a set of reusable, cross-
browser tested, high-quality
JavaScript and CSS UI
components. We developed AUI
for use in Atlassian applications.

less work, more awesome

What AUI provides
• Wraps jQuery
• JS components
• JS utilities
• Ready to go CSS

AUI vs AJS

Dialog

Inline Dialog

Dropdown

Forms

What
Why did Atlassian choose jQuery?
How
Where
?

jQuery is a fast and concise JavaScript
Library that simplifies HTML
document traversing, event handling,
animating, and Ajax interactions for
rapid web development. jQuery is
designed to change the way that you
write JavaScript.
“

Why Atlassian chose jQuery
January, 2008

What
Why should you care?
How
Where
?

Consistent look and feel

Ready to use components

Helpful utilities

What
Why
How do you use AUI?
Where
?

Dialog
var popup = new AJS.Dialog(400, 200, "my-
popup");
popup.show( );

Inline Dialog
AJS.InlineDialog(AJS.$("#my-trigger"), 1, "dialog-
content.html");

Dropdown
AJS.$("#my-dropdown").dropdown("Standard");

AJS.format

AJS.format("Showing entries {0} - {1} of {2}", 0, 10,
11);
AJS.format

>> Showing entries 0 - 10 of 11
AJS.format
AJS.format("Showing entries {0} - {1} of {2}", 0, 10,
11);

Keyboard shortcuts

Keyboard shortcuts
AJS.whenIType("cl").click("#test-click");

Keyboard shortcuts
AJS.whenIType("cl").click("#test-click");
AJS.whenIType("sf").execute(someFunction);

Sounds great...

Sounds great...
...but how do I get it in my plugin?

Sounds great...
$webResourceManager.requireResource
("com.atlassian.auiplugin:ajs")
...but how do I get it in my plugin?

atlassian-plugin.xml
<web-resource name="Fake plugin resources" key="fake-resources">
<dependency>com.atlassian.auiplugin:ajs</dependency>
<resource type="download" name="fake-plugin.js" location="js/fake-
plugin.js"/>
<resource type="download" name="fake-plugin.css" location="css/fake-
plugin.css"/>
</web-resource>

atlassian-plugin.xml
<web-resource name="Fake plugin resources" key="fake-resources">
<dependency>com.atlassian.auiplugin:ajs</dependency>
<resource type="download" name="fake-plugin.js" location="js/fake-
plugin.js"/>
<resource type="download" name="fake-plugin.css" location="css/fake-
plugin.css"/>
</web-resource>
fake-plugin.vm
$webResourceManager.requireResource("com.atlassian.example:fake-
resources")

What
Why
How
Where is AUI now?
?

• Latest version: 3.2
• All products on AUI 3.x
• Open source
http://conﬂuence.atlassian.com/display/AUI/Atlassian+User+Interface+(AUI)
+Developer+Documentation
https://studio.atlassian.com/browse/AJS

Public vs Private Components

What
Why
How
Where is AUI headed?
?

More formalized processes
• Testing
• Builds
• Infrastructure
• Dedicated resources

Community contributions

Community feedback

Photo credits
http://www.flickr.com/photos/dmitry-baranovskiy/2378867408/
http://www.flickr.com/photos/cayusa/384187184/
http://www.flickr.com/photos/oskay/437341128/
http://www.flickr.com/photos/rocketlass/2851359961/
http://www.flickr.com/photos/mimk/1350963678/

More information
• Developer Docs: http://conﬂuence.atlassian.com/display/AUI/
Atlassian+User+Interface+(AUI)+Developer+Documentation
• Javadocs: http://docs.atlassian.com/aui/3.0/
• Demos: https://studio.atlassian.com/source/browse/
~raw,r=HEAD/AJS/trunk/auiplugin/src/demo/index.html (Studio
login required)

AtlasCamp 2010: Needs more jQuery - Using advanced Javascript in Atlassian Plugins - Zach Davis

More Related Content

Similar to AtlasCamp 2010: Needs more jQuery - Using advanced Javascript in Atlassian Plugins - Zach Davis (20)

More from Atlassian (20)

AtlasCamp 2010: Needs more jQuery - Using advanced Javascript in Atlassian Plugins - Zach Davis